<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课-课程</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="js/style.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div class="g-header">
        <div class="m-header">
            <div class="logo">
                <a href="#"><img src="img/logo.png" alt=""></a>
            </div>
            <div class="nav">
                <a href="">课程</a>
                <a href="index.html">问答</a>
                <a href="">我的课程</a>
            </div>
            <div class="sch">
                <input type="text" class="search" value="搜索课程、问答">
                <i class="iconfont">&#xe613;</i>
            </div>
            <ul class="user-info">
                <li><a class="message iconfont" href="">&#xe614;</a></li>
                <li><a class="exp" href="">经验<br>70</a></li>
                <li><a class="head" href=""></a></li>
            </ul>
        </div>
    </div>
    <div class="g-nav">
        <div class="m-nav">
            <ul class="z-nav clearfix">
                <li><a href="">慕课发现</a></li>
                <li><a class="on" href="">全部课程</a></li>
                <li><a href="">学习计划</a></li>
                <li><a href="">顶尖分享</a></li>
            </ul>
        </div>    
    </div>
    <div class="g-mian">
        <div class="m-mian clearfix">
            <div id="course-sider" class="course-sider">
                <dl id="dl1">
                    <dt class="z-sider on"><a class="cur" href="">全部</a>
                    </dt>
                    <dd class="z-sider">
                        <a href="">前端开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </dd>
                    <dd class="z-sider">
                        <a href="">后端开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                            </ul>
                        </div>
                    </dd>
                    <dd class="z-sider">
                        <a href="">移动开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </dd>
                    <dd class="z-sider">
                        <a href="">数据处理</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </dd>
                    <dd class="z-sider">
                        <a href="">图像处理</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </dd>
                </dl>
                <!-- <ul id="ul1">
                    <li class="z-sider on"><a class="cur" href="">全部</a>
                        <div class="sort"></div>    
                    </li>
                    <li class="z-sider">
                        <a href="">前端开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="z-sider">
                        <a href="">后端开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="z-sider">
                        <a href="">移动开发</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="z-sider">
                        <a href="">数据处理</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="z-sider">
                        <a href="">图像处理</a><i class="iconfont">&#xe60e;</i>
                        <div id="sort" class="sort">
                            <p class="sort-bg"></p>
                            <ul>
                                <li><a href="">HTML/CSS</a></li>
                                <li><a href="">Javascipt</a></li>
                                <li><a href="">CSS3</a></li>
                                <li><a href="">Html5</a></li>
                                <li><a href="">JQuery</a></li>
                                <li><a href="">AngularJS</a></li>
                                <li><a href="">Node.js</a></li>
                                <li><a href="">Bootstrap</a></li>
                                <li><a href="">WebApp</a></li>
                                <li><a href="">前端工具</a></li>
                            </ul>
                        </div>
                    </li>
                </ul> -->
            </div>
            <!-- <script type="text/javascript">
            window.onload=function(){
                var Oul=document.getElementById('ul1');
                var Ali=Oul.getElementsByTagName('li');
                var div=Oul.getElementsByTagName('div');
                var i=0;
                for (i = 0; i < Ali.length; i++) {
                   if(Ali[i].className=="z-sider"){
                    Ali[i].index=i;
                    Ali[i].onmouseover=function(){
                        this.className='z-sider on';
                        div[this.index].style.display='block';
                    }
                    Ali[i].onmouseout=function(){
                        this.className='z-sider';
                        div[this.index].style.display='none';
                    }
                   }
                };
            }
            </script> -->
            <div class="course-content">
                <div class="course-tit">
                    <h2>全部</h2>
                    <div class="course-filter"></div>
                    <ul>
                        <li class="on"><a class="cur" href="">最新上线</a></li>
                        <li><a href="">最受欢迎</a></li>
                    </ul>
                </div>
                <div class="course-list">
                    <ul class="clearfix">
                        <li>
                            <a href="">
                            <div class="list-img">
                            <img src="img/img1.png" alt="">
                            </div>
                            <h3>JS实现"旋转木马"幻灯片效果</h3>
                            <div class="info">
                                <p>JS组件封装，快来加入我们的课程！</p>
                                <span class="new l">共3章19节</span>
                                <span class="r">课程时长：2小时39分</span>
                            </div>
                            <div class="tips">
                                <span class="new l">更新完毕</span>
                                <span class="r">6534人学习</span>
                            </div>
                            </a>
                        </li>
                        <li>
                            <div class="list-img">
                            <img src="img/img2.png" alt="">
                            </div>
                            <h3>JS实现"旋转木马"幻灯片效果</h3>
                            <div class="info">
                                <p>JS组件封装，快来加入我们的课程！</p>
                                <span class="l">共3章19节</span>
                                <span class="r">课程时长：2小时39分</span>
                            </div>
                            <div class="tips">
                                <span class="l">更新完毕</span>
                                <span class="r">6534人学习</span>
                            </div>
                        </li>
                        <li>
                            <div class="list-img">
                            <img src="img/img1.png" alt="">
                            </div>
                            <h3>JS实现"旋转木马"幻灯片效果</h3>
                            <div class="info">
                                <p>JS组件封装，快来加入我们的课程！</p>
                                <span class="l">共3章19节</span>
                                <span class="r">课程时长：2小时39分</span>
                            </div>
                            <div class="tips">
                                <span class="l">更新完毕</span>
                                <span class="r">6534人学习</span>
                            </div>
                        </li>
                        <li>
                            <div class="list-img">
                            <img src="img/img2.png" alt="">
                            </div>
                            <h3>JS实现"旋转木马"幻灯片效果</h3>
                            <div class="info">
                                <p>JS组件封装，快来加入我们的课程！</p>
                                <span class="l">共3章19节</span>
                                <span class="r">课程时长：2小时39分</span>
                            </div>
                            <div class="tips">
                                <span class="l">更新完毕</span>
                                <span class="r">6534人学习</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        <div class="g-footer">
        <div class="m-footer clearfix">
            <div class="footer-info ">
                <a class="footer-logo" ></a>
                <p>我们的使命：传播互联网最前沿的技术，帮更多的人实现梦想！</p>
                <p>Copyright © 2015 imooc.con All Rights Reserved|京ICP备13046642号-2</p>
            </div>    
            <div class="footer-link ">
                <a href="">网站首页</a>
                <a href="">人才招聘</a>
                <a href="">联系我们</a>
                <a href="">高校联盟</a>
                <a href="">关于我们</a>
                <a href="">讲师招募</a>
                <a href="">意见反馈</a>
                <a href="">友情链接</a>
            </div>
            <div id="foot" class="footer-icon">
            <span id="weixin-box" class="weixin-box"></span>
                <a  class="weixin" href=""></a>
                <a class="weibo" href=""></a>
                <a class="qzone" href=""></a>
            </div>
        </div>
    </div>
</body>
</html>